<template>
	<Transition name="slide-up">
		<div
			v-if="visible"
			class="update-drawer-overlay"
			@click="handleOverlayClick"
		>
			<div
				class="update-drawer"
				@click.stop
			>
				<!-- 拖动指示器 -->
				<div class="drawer-handle">
					<span class="handle-bar"></span>
				</div>

				<div class="update-content">
			<!-- 图标 -->
			<div class="update-icon">
				<div class="icon-circle">
					<ElIcon :size="48">
						<Download />
					</ElIcon>
				</div>
			</div>

			<!-- 标题 -->
			<h2 class="update-title">发现新版本</h2>

			<!-- 版本信息 -->
			<div class="version-info">
				<div class="version-badge">
					<span class="label">当前版本</span>
					<span class="value">{{ currentVersion }}</span>
				</div>
				<div class="version-arrow">
					<ElIcon>
						<Right />
					</ElIcon>
				</div>
				<div class="version-badge new">
					<span class="label">最新版本</span>
					<span class="value">{{ newVersion }}</span>
				</div>
			</div>

			<!-- 更新内容 -->
			<div class="update-details">
				<h3>更新内容</h3>
				<ul class="update-list">
					<li
						v-for="(item, index) in updateContent"
						:key="index"
					>
						<ElIcon class="check-icon">
							<Check />
						</ElIcon>
						<span>{{ item }}</span>
					</li>
				</ul>
			</div>

			<!-- 进度条（更新中显示） -->
			<div
				v-if="isUpdating"
				class="update-progress"
			>
				<ElProgress
					:percentage="progress"
					:stroke-width="8"
					:show-text="false"
				/>
				<p class="progress-text">正在更新... {{ progress }}%</p>
			</div>

			<!-- 操作按钮 -->
			<div class="update-actions">
				<ElButton
					v-if="!isUpdating"
					size="large"
					@click="handleLater"
				>
					稍后提醒
				</ElButton>
				<ElButton
					v-if="!isUpdating"
					type="primary"
					size="large"
					@click="handleUpdate"
				>
					立即更新
				</ElButton>
				<ElButton
					v-if="isUpdating"
					type="primary"
					size="large"
					disabled
				>
					更新中...
				</ElButton>
			</div>

			<!-- 提示文字 -->
			<p class="update-tip">
				{{ isUpdating ? '请勿关闭窗口，更新完成后将自动刷新' : '建议在网络良好时进行更新' }}
			</p>
		</div>
	</ElDialog>
</template>

<script setup lang="ts">
import { Download, Right, Check } from '@element-plus/icons-vue'

interface Props {
	modelValue?: boolean
	currentVersion?: string
	newVersion?: string
	updateContent?: string[]
}

const props = withDefaults(defineProps<Props>(), {
	modelValue: false,
	currentVersion: '1.0.0',
	newVersion: '1.1.0',
	updateContent: () => [
		'优化了系统性能，运行更流畅',
		'修复了已知问题，提升稳定性',
		'新增了多项实用功能',
		'改进了用户界面体验',
	],
})

const emit = defineEmits<{
	'update:modelValue': [value: boolean]
	update: []
	later: []
}>()

const visible = computed({
	get: () => props.modelValue,
	set: (val) => emit('update:modelValue', val),
})

const isUpdating = ref(false)
const progress = ref(0)

// 处理立即更新
const handleUpdate = () => {
	isUpdating.value = true
	progress.value = 0

	// 模拟更新进度
	const timer = setInterval(() => {
		progress.value += Math.random() * 15
		if (progress.value >= 100) {
			progress.value = 100
			clearInterval(timer)
			setTimeout(() => {
				emit('update')
				// 实际项目中这里应该刷新页面或重新加载
				// window.location.reload()
			}, 500)
		}
	}, 300)
}

// 处理稍后提醒
const handleLater = () => {
	visible.value = false
	emit('later')
}
</script>

<style scoped lang="scss">
.update-dialog {
	:deep(.el-dialog) {
		border-radius: 20px;
		padding: 0;
		overflow: hidden;
	}

	:deep(.el-dialog__header) {
		display: none;
	}

	:deep(.el-dialog__body) {
		padding: 0;
	}
}

.update-content {
	padding: 40px;
	text-align: center;
}

.update-icon {
	margin-bottom: 24px;

	.icon-circle {
		width: 96px;
		height: 96px;
		margin: 0 auto;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
		animation: pulse 2s ease-in-out infinite;
	}
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6);
	}
}

.update-title {
	font-size: 28px;
	font-weight: 600;
	color: #1d1d1f;
	margin: 0 0 24px;
}

.version-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 32px;
	padding: 20px;
	background: #f5f7fa;
	border-radius: 12px;
}

.version-badge {
	display: flex;
	flex-direction: column;
	gap: 4px;

	.label {
		font-size: 12px;
		color: #86868b;
	}

	.value {
		font-size: 18px;
		font-weight: 600;
		color: #1d1d1f;
	}

	&.new .value {
		color: #667eea;
	}
}

.version-arrow {
	color: #86868b;
	font-size: 20px;
}

.update-details {
	text-align: left;
	margin-bottom: 32px;

	h3 {
		font-size: 17px;
		font-weight: 600;
		color: #1d1d1f;
		margin: 0 0 16px;
	}
}

.update-list {
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 8px 0;
		font-size: 14px;
		color: #6e6e73;
		line-height: 1.6;

		.check-icon {
			color: #67c23a;
			font-size: 16px;
			flex-shrink: 0;
			margin-top: 2px;
		}
	}
}

.update-progress {
	margin-bottom: 24px;

	.progress-text {
		margin-top: 12px;
		font-size: 14px;
		color: #667eea;
		font-weight: 500;
	}
}

.update-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 16px;

	.el-button {
		min-width: 140px;
		border-radius: 12px;
		font-weight: 500;
	}
}

.update-tip {
	font-size: 12px;
	color: #86868b;
	margin: 0;
	line-height: 1.5;
}

// 响应式
@media (max-width: 600px) {
	.update-content {
		padding: 32px 24px;
	}

	.update-title {
		font-size: 24px;
	}

	.version-info {
		flex-direction: column;
		gap: 12px;
	}

	.version-arrow {
		transform: rotate(90deg);
	}

	.update-actions {
		flex-direction: column;

		.el-button {
			width: 100%;
		}
	}
}
</style>
